<template>
    <el-form class="k-form"
             :label-width="labelWidth"
             @submit.prevent.native="onSubmit">
        <div class="ke-component" v-loading="loading">
            <div class="ke-component-content">
                <el-form-item v-for="(item, idx) in formItems"
                              :key="idx"
                              :label="item.label"
                >
                    <component
                        v-if="item.type !== 'hidden'"
                        :is="getComponentType(item)"
                        v-model="dialogData[item.prop]"
                        :default-value="dialogDataValue(item)"
                        :required="isRequired(item)"
                        :options="item.options"
                        :placeholder-text="placeholderString(item)"
                        :type="item.type === 'password' ? 'password' : 'text'"
                        :multi="getConfigValue(item, 'multi')"
                    />
                </el-form-item>
            </div>

            <div class="ke-component-footer">
                <el-form-item style="text-align: right">
                    <el-button type="primary" native-type="submit">确认</el-button>

                    <el-button @click="onDialogClose">取消</el-button>
                </el-form-item>
            </div>
        </div>
    </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { DialogConfig, DialogFormItem } from '@/store/dialog';
import KInputUpload from '@/components/input-upload.vue';

import KImage from './children/image.vue';
import KInput from './children/input.vue';
import KRadio from './children/radio.vue';
import KSelect from './children/select.vue';
import KTextarea from './children/textarea.vue';
import KTransfer from './children/transfer.vue';

@Component({
    name: 'AppDialogComponent',
    components: {
        KInputUpload,
        KImage,
        KInput,
        KRadio,
        KSelect,
        KTextarea,
        KTransfer,
    }
})
export default class AppDialogComponent extends Vue {
    @Prop({ type: Object }) readonly dialogInfo!: DialogConfig;
    @Prop({ type: Object }) readonly dialogData!: any;
    @Prop({ type: Array }) readonly formItems!: DialogFormItem[];
    private loading: boolean = false;

    getComponentType(item: any): string {
        if (item.type === undefined || item.type === 'input' || item.type === 'password') {
            return 'k-input';
        }
        return `k-${item.type}`;
    }

    // 是否必填
    placeholderString(item: DialogFormItem) {
        if (typeof item.placeholder === 'function') {
            return item.placeholder(this.dialogData[item.prop], this.dialogData);
        }
        return item.placeholder;
    }

    // 是否必填
    isRequired(item: DialogFormItem) {
        if (typeof item.required === 'function') {
            return item.required(this.dialogData[item.prop], this.dialogData);
        }
        return item.required;
    }

    // 默认值
    dialogDataValue(item: any): any {
        let value = this.dialogData[item.prop];
        if (value === undefined) {
            // this.onChangeValue(item, item.default);
            return item.default;
        }
        return value;
    }

    // 标签宽度
    get labelWidth() {
        return this.dialogInfo?.labelWidth;
    }

    // 值修改
    onChangeValue(item: any, value: any) {
        this.$emit('change', item, value);
    }

    getConfigValue(item: any, key: string) {
        if (!item.config) {
            return null;
        }
        return item.config[key];
    }

    // 表单提交
    onSubmit() {
        this.loading = true;
        let map = {} as any;
        this.formItems.map(item => {
            map[item.prop] = this.dialogData[item.prop];
        });
        this.$http.post(this.dialogInfo.url + '/' + this.dialogInfo.type, map)
            .finally(() => {
                this.loading = false;
            })
            .then((result: any) => {
                this.$message.success(
                    this.dialogInfo.title
                    + '成功');
                console.log(result);
                this.$emit('success', result.data);
            })
    }

    // 窗口关闭
    onDialogClose() {
        this.$emit('close');
    }

}
</script>

<style scoped lang="scss">
.k-form {
    /deep/ .el-form-item__content {
        position: relative;
    }
    /deep/ .k-input-hidden {
        position: absolute;
        bottom: 0;
        opacity: 0;
    }
}
</style>

